import { NavLink } from 'react-router';
import Router from './router';
import { CounterStoreProvider } from '@/store/counterStore';

import './locale/index'
import { useTranslation } from 'react-i18next';

const App = () => {
  const { t, i18n } = useTranslation()

  return (
    <div className="flex items-center justify-center w-screen h-screen bg-blue-400">
      <CounterStoreProvider>
        <main>
          <h1 className="font-bold">{t('welcome')}</h1>
          <div>
            <button
              className="bg-blue-500 text-white px-4 py-2 rounded-lg"
              onClick={() => {
                const currentLanguage = i18n.language
                if (currentLanguage === 'en') {
                  i18n.changeLanguage('zh')
                } else {
                  i18n.changeLanguage('en')
                }
              }}>切换语言</button>
          </div>
          <div className="flex gap-4 my-4">
            <NavLink
              to="/home"
              className={({ isActive }) => (isActive ? 'active' : '')}
            >
              Home
            </NavLink>
            <NavLink
              to="/about"
              className={({ isActive }) => (isActive ? 'active' : '')}
            >
              About
            </NavLink>
          </div>
          <Router></Router>
        </main>
      </CounterStoreProvider>
    </div>
  );
};

export default App;
